<template>
  <div class="container">
    <div class="title">
      <h2>菜单管理</h2>
      <h5>主要用于系统的菜单和按钮权限进行管理</h5>
    </div>
    <!-- 标题 -->

    <!-- 表格 -->
    <el-card class="tableCard">
      <el-button style="float: right; padding: 10px 20px;margin-right:80px" type="primary" size="small">新增项目</el-button>

      <!-- 树形表单 -->
      <treeTable />
    </el-card>
    <!-- <RoleDrawer ref="RoleDrawer" /> -->

  </div>

</template>

<script>
import axios from 'axios'
import treeTable from './components/menu/treeTable'
// import { getMenuListApi } from '@/api/menu'
// import RoleDrawer from './components/roleDrawer.vue'
// import { transListToTreeData } from '@/utils'
export default {
  name: 'RoleIndex',
  components: {
    treeTable
    // RoleDrawer
  },
  data() {
    return {
      // 查询参数
      queryData: {
        current: 1,
        pageSize: 10,
        create_time: '',
        name: null,
        status: null
      },
      formInline: {},
      formData: [], // 渲染数据
      status: [{ status: 1, label: '启用' }, { status: 0, label: '禁用' }]
    }
  },
  created() {
    // this.getRoleList()
  },
  mounted() {

  },

  methods: {
    async  mockRequest() {
      const res = await axios.post('/mock/auth/menu', {
        username: 'tom',
        password: '123456'
      })
      console.log(res)
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  padding:40px;
  .title{
  display: flex;
  align-items: center;
  h2{
    margin-right:20px;
  }
  h5{
    font-weight: 400;
    color:#9c9c9d;
    vertical-align: middle;
  }
}
.demo-form-inline{
  display: flex;
}
.el-form-item{
  margin-right:73px;
}
.btn{
  padding-top:40px;
}
.box-card{
  margin-bottom:10px;
}
}

</style>
